<template>
  <el-dialog
    title="出库操作"
    v-model="dialogFormVisible"
    width="60%"
    draggable
    style="position: relative; background-color: #f1f1f1"
    :close-on-click-modal="false"
  >
    <el-table ref="table" :data="EXlist" border stripe>
      <el-table-column prop="model" label="Model" />
      <el-table-column prop="purchaseNmar" label="Purchaser" />
      <el-table-column prop="quantity" label="Quantity" />
      <el-table-column prop="purchase_price" label="Purchase_Price" />
      <el-table-column prop="num" label="Num">
        <template #default="{ row, $index }">
          <el-input
            v-model.number="row.num"
            placeholder="Please enter num"
            size="mini"
            clearable
            @change="numInput(row.num, $index)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default="{ row }">
          <el-popconfirm
            title="Are you sure to delete this?"
            @confirm="deleteEX(row)"
            hide-after="0"
          >
            <template #reference>
              <el-button link type="primary" size="small"> delete </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">Cancel</el-button>
        <el-button type="primary" @click="confirm"> Confirm </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import * as api from "../../../api2/index";
import { useDemoStore } from "../../../pinia/index";
let token = useDemoStore().token; //token
const dialogFormVisible = ref(false); //弹窗开关
const emits = defineEmits(["refresh", "deleteEXlist"]);

//表格部分
const EXlist = ref([]);
const numInput = (val, index) => {
  if (!val) {
    return ElMessage({
      type: "info",
      message: "Please enter num",
    });
  } else if (!Number.isInteger(val)) {
    EXlist.value[index].num = 1;
    return ElMessage({
      type: "error",
      message: "Please enter digits",
    });
  } else if (val <= 0) {
    EXlist.value[index].num = 1;
    return ElMessage({
      type: "error",
      message: "Please don't be less than zero",
    });
  } else if (val > EXlist.value[index].quantity) {
    EXlist.value[index].num = 1;
    return ElMessage({
      type: "error",
      message: "Please do not exceed the inventory",
    });
  }
};
const deleteEX = (row) => {
  //删除一条出库数据
  EXlist.value = EXlist.value.filter((item) => {
    return item != row;
  });
  emits("deleteEXlist", row);
  if (EXlist.value.length == 0) {
    close();
  }
};

const show = (list) => {
  //弹窗显示
  EXlist.value = list;
  console.log(EXlist.value);

  dialogFormVisible.value = true;
};
const close = () => {
  //弹窗关闭
  dialogFormVisible.value = false;
};
const confirm = () => {
  //提交出库
  let panduan = false;
  EXlist.value.forEach((item) => {
    if (!item.num || item.num == "") {
      panduan = true;
    }
  });
  if (panduan) {
    return ElMessage({
      type: "info",
      message: "Please enter num",
    });
  }
  EXlist.value.forEach((item) => {
    item.type = "out";
  });
  api
    .putOutStorage({
      token,
      data: EXlist.value,
    })
    .then((res) => {
      ElMessage({
        type: "success",
        message: res.Message,
      });
      close();
      emits("refresh");
    });
};
defineExpose({
  show,
});
</script>
<style lang="less" scoped></style>
